<template>
    <section class="main">
        <input id="toggle-all" class="toggle-all" type="checkbox" />
        <label for="toggle-all">Mark all as complete</label>
        <ul class="todo-list">
            <li :class="{ completed: item.done }" v-for="item in todos.list" :key="item.id">
                <div class="view">
                    <input class="toggle" type="checkbox" :checked="item.done" />
                    <label>{{ item.name }}</label>
                    <button class="destroy"></button>
                </div>
                <input class="edit" value="Create a TodoMVC template" />

            </li>
        </ul>
    </section>

    <input class="toggle" type="checkbox" :checked="item.done" @change="todos.changeDone(item.id)" />

    <input id="toggle-all" class="toggle-all" type="checkbox" :checked="todos.isCheckAll"
        @change="todos.checkAll(!todos.isCheckAll)" />

    <ul class="todo-list">
        <li :class="{ completed: item.done }" v-for="item in todos.showList" :key="item.id"></li>
    </ul>
</template>

<script setup>
import useStore from '../../store';
import todos from '../../store/modules/todos'
const { todos } = useStore()

</script>

<style></style>